<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box{
				width:500px;
				height:500px;
				border:1px solid red;
			}
		</style>
		<script>
			window.onload = function(){
				var cavBox = document.getElementById("cav");
				var ocav = cavBox.getContext('2d');
				
				ocav.save();
				//平移
				ocav.translate(100,100);	
				ocav.fillRect(0,0,100,100);
				ocav.restore();
				ocav.fillRect(0,200,50,50);
				
			}
		</script>
	</head>
	<body>
		<div id="box">
			<canvas id="cav" width="500" height="500"></canvas>	
		</div>

	</body>
</html>
